<!DOCTYPE html>
<title>Test that we can display a track list menu and select tracks from the list.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<!-- Width should be large enough to display closed captions button. -->
<video controls style="width: 500px">
    <track src="track/captions-webvtt/captions.vtt" kind="captions" label="Track1">
    <track src="track/captions-webvtt/long-word.vtt" kind="captions" label="Track2">
</video>
<script>
async_test(function(t) {
    var video = document.querySelector("video");
    enableTestMode(video);

    var trackElements = document.querySelectorAll("track");
    var textTracks = video.textTracks;
    for (var i = 0; i < textTracks.length; i++) {
        trackElements[i].onload = t.step_func(trackLoaded);
        var track = textTracks[i];
        if (track.mode == "disabled")
            track.mode = "hidden";
    }

    var numberOfTracksLoaded = 0;
    function trackLoaded() {
        numberOfTracksLoaded++;
        if (numberOfTracksLoaded != 2)
            return;

        // Seek to some point within the first second
        video.currentTime = 0.5;

        video.onseeked = t.step_func(function() {
            assert_true(isClosedCaptionsButtonEnabled(video));
            assert_equals(video.textTracks.length, 2);
            assert_equals(video.textTracks[0].mode, "hidden");
            assert_equals(video.textTracks[1].mode, "hidden");

            // Select track 0 and verify it is displayed.
            clickTextTrackAtIndex(video, 0, t.step_func(function() {
              assert_equals(video.textTracks[0].mode, "showing");
              assert_equals(video.textTracks[1].mode, "hidden");
              assert_equals(textTrackDisplayElement(video).innerText, "Lorem");

              // Select track 1 and verify it is displayed.
              clickTextTrackAtIndex(video, 1, t.step_func_done(function() {
                assert_equals(video.textTracks[0].mode, "disabled");
                assert_equals(video.textTracks[1].mode, "showing");
                assert_equals(textTrackDisplayElement(video).innerText, "first caption");
              }));
            }));
        });

        video.src = "content/test.ogv";
    }
});
</script>
